<template>
  <div class="wrap">
    <div class="chooseReportTitle">请选择举报类型</div>
    <div class="reportKindsWrap">
      <div class="repKindsiItem" @click="jumpReport(item.typeName)" v-for="(item,index) in resTypeList" :key="index">
        <em>{{item.typeName}}</em>
        <img src="@/assets/rightArrow.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import { Overlay, Stepper } from "vant";
import { apiTypeList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      dataJump: '',
      contentType:'',
      resTypeList:'',//举报类型列表
    };
  },
  mounted() {
    this.getTypeList()
  },
  created(){
    this.dataJump =  this.$store.state.reportPara.dataJump;
    this.contentType  =  this.$store.state.reportPara.contentType;
  },
  methods: {
    //获取举报类型：
    getTypeList() {
      apiTypeList({
      }).then((res) => {
        this.resTypeList = res.data
      });
    },
    jumpReport(typeName) {
     
      var obj = {
        dataJump:this.dataJump, //举报的帖子、评论、店铺id
        contentType:this.contentType, //举报内容类型0帖子1评论2店铺
        typeName:typeName  //	举报类型
      }
      this.$store.commit('reportPara',obj)
      this.$router.push({
        path: "/pages/report",
        query: obj,
      });
    },
  },
  components: {
    [Overlay.name]: Overlay,
    [Stepper.name]: Stepper,
  },
};
</script>

<style scoped>
*{
    padding: 0px;
    margin: 0px;
    text-align: left;
}
.wrap{
    min-height: 100vh;
    background-color: #F2F4FA;
}
.chooseReportTitle {
    margin-left: 20px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    padding-top: 20px;
}
.reportKindsWrap {
    width: calc(100% - 70px);
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 5px 20px 20px 20px;
    margin-top: 14px;
}
.repKindsiItem {
    margin-top: 15px;
}
em {
    font-size: 13px;
    font-weight: 400;
    color: #181818;
}
img {
    width: 5px;
    height: 9px;
    float: right;
    margin-top: 5px;
}
</style>
